<template>
  <div>
    <el-button type="primary" @click="addSelect" :disabled="formOpr != 1 ">新增</el-button>
    <!--    <el-button type="danger" @click="delSelect" v-show="multipleSelection.length>0" :disabled="formOpr != 1 ">删除</el-button>-->
    <el-button type="danger" @click="delSelect" v-show="multipleSelection.length>0" :disabled="formOpr != 1">删除
    </el-button>
    <el-table
      :data="tableData"
      height="250"
      border
      style="width: 100%"
      :row-style="{ height: '40px' }"
      :row-class-name="rowClassName"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="商品ID"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="proName"
        label="商品名称"
        width="300">
        <template slot-scope="scope">

          <el-input style="width: 160px" v-model="scope.row.proName" placeholder="" readonly>

          </el-input>
          <!--          <span>{{ scope.$index }}</span>-->
          <el-button type="type" @click="selectGoods(scope.$index)" :disabled="formOpr != 1 ">选择商品</el-button>
          <el-dialog width="1000px" title="商品" :visible.sync="isSearchGoods" append-to-body>
            <GoodsIndex @selectGoodsMethod="handleChangeGoods(arguments)" :goodsArrIndex="indexTemp"/>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="isSearchGoods = false">确 定</el-button>
              <el-button @click="isSearchGoods = false">取 消</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
      <el-table-column
        prop="unitName"
        label="单位">
      </el-table-column>
      <el-table-column
        label="数量">
        <template slot-scope="scope">
          <!--              <el-input-number v-model="scope.row.number" @change="handleChange" :min="1" :max="10" label="数量"></el-input-number>-->
          <el-input v-model="numberArr[scope.$index].number" @blur="checkNumber(scope.$index)" :readonly="formOpr != 1"
                    placeholder="数量"></el-input>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import GoodsIndex from "@/views/caigou/buyReq/GoodsIndex.vue";

export default {
  name: 'GoodsSelect',
  components: {GoodsIndex},
  props: ['goodsList', 'formOpr', 'idAndNumberArr'],
  data() {
    return {
      indexTemp: 0,
      numberArr: [],
      isSearchGoods: false,
      tableData: [],
      multipleSelection: [],
      multipleSelectAry: [],
    }
  },
  watch: {
    numberArr: {
      handler(newVal, oldVal) {
        console.log('任务列表变化：', newVal, oldVal);
        this.$emit("selectGoodsMethod", newVal)

      },
      deep: true
    },

  },
  methods: {
    reset() {
      this.numberArr = [];
      this.tableData = [];
      this.multipleSelection = [];
      this.multipleSelectAry = [];
    },
    selectGoods(index) {
      this.isSearchGoods = true;
      this.indexTemp = index;
    },
    checkNumber(index) {
      let re1 = /^(0|[1-9][0-9]*)$/;
      let re = /^[0-9]+[0-9]*[0-9]*$/;
      if (!re1.test(this.numberArr[index].number)) {
        this.numberArr[index].number = this.tableData[index].number;
        this.numberArr[index].id = this.tableData[index].id;
        // row.number = 4;1
      } else {
        this.tableData[index].number = this.numberArr[index].number;
        this.numberArr[index].id = this.tableData[index].id;
      }
      console.log("tableData")
      console.log(this.tableData);
      console.log('numberArr')
      console.log(this.numberArr)
    },
    handleChangeGoods(args) {

      console.log('handleChangeGoods  args0', args[0])//goods
      console.log('handleChangeGoods  args1', args[1])//index

      args[0].number = 1 || this.numberArr[args[1]].number;
      this.tableData[args[1]] = args[0];
      this.numberArr[args[1]].id = this.tableData[args[1]].id;

      this.tableData.push({})
      this.tableData.pop({})
    },
    handleChange(value) {
      // console.log(this.tableData)
    },
    rowClassName(row, index) {
      row.row.index = row.rowIndex;
    },
    handleSelectionChange(rows) {
      this.multipleSelectAry = [];
      this.multipleSelection = rows;
      rows.forEach((item) => {
        this.multipleSelectAry.push(item.index);
      });
      console.log(this.multipleSelectAry)
    },
    delSelect() {
      this.tableData = this.tableData.filter((item, index) => {
        return !this.multipleSelectAry.includes(index);
      });
      this.$emit('cancelAddBuyReqGoodsListFromAskGoodsList', this.multipleSelectAry)
    },
    addSelect() {
      let isAddEnable = true;
      if (this.tableData.length != 0) {
        this.tableData.forEach(item => {
          if (item.id == null || item.id == undefined || item.id == '') {
            this.$message({
              message: '请选择商品',
              type: 'warning'
            });
            isAddEnable = false;
          }
        })
      }
      if (isAddEnable) {
        this.tableData.push({
          index: Date.now()
        });
        this.numberArr.push({id: undefined, number: 1})
      }
    },
    parentComponent(goodsList, idAndNumberArr) {
      this.tableData = goodsList;
      this.numberArr = idAndNumberArr;
    }

  },
  mounted() {
    console.log('GoodsSelect mounted props goodsList', this.goodsList)
    this.tableData = this.goodsList;

    console.log('GoodsSelect mounted data tableData', this.tableData)
    this.numberArr = this.idAndNumberArr

  },
  activated() {
    this.tableData = [];
  }
}
</script>
<style scoped lang="css">

</style>
